<template>
  <h2>采购管理--添加采购</h2>
  <div class="parentDiv">
    <div id="form-add">
      <a-form
        :model="formState"
        v-bind="layout"
        name="nest-messages"
        :validate-messages="validateMessages"
        @finish="onFinish"
        labelAlign="left"
      >
        <a-form-item
          :name="['purchase', 'commodityName']"
          label="商品名称"
          :rules="[{ required: true }]"
        >
          <a-input v-model:value="formState.purchase.commodityName" />
        </a-form-item>
        <a-form-item
          :name="['purchase', 'supplierName']"
          label="供应商"
          :rules="[{ required: true }]"
        >
          <a-input v-model:value="formState.purchase.supplierName" />
        </a-form-item>
        <a-form-item
          :name="['purchase', 'purchaseNum']"
          label="采购数量"
          :rules="[{ required: true }]"
        >
          <a-input v-model:value="formState.purchase.purchaseNum" />
        </a-form-item>

        <a-form-item :wrapper-col="{ ...layout.wrapperCol, offset: 8 }">
          <a-button type="primary" html-type="submit" @click="AddOnePurchase()"
            >Submit</a-button
          >
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script>
import { defineComponent, reactive } from "vue";
import { addPurchase } from "@/api/purchase";
import { message } from "ant-design-vue";
// import { router } from "../router/index";
export default defineComponent({
  name: "purchaseAdd",
  setup() {
    const layout = {
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 16,
      },
    };
    const validateMessages = {
      required: "${label} is required!",
    };
    const formState = reactive({
      purchase: {
        commodityName: "",
        supplierName: "",
        purchaseNum: "",
      },
    });

    const onFinish = (values) => {
      console.log("Success:", values);
    };
    const AddOnePurchase = () => {
      addPurchase(formState.purchase).then((resonse) => {
        if (resonse.code == 200) {
          message.success("添加成功", 3);
          formState.purchase = {
            commodityName: "",
            supplierName: "",
            purchaseNum: "",
          };
          //   this.$router.push("/index/purchase/purchaseAdd");
        } else {
          message.error("添加失败", 3);
        }
      });
    };

    return {
      formState,
      onFinish,
      layout,
      validateMessages,
      AddOnePurchase,
    };
  },
});
</script>
<style scoped>
#form-add {
  width: auto;
  height: auto;
  justify-content: center;
  align-items: center;
  display: flex;

  /* border: 1px solid black; */
}
.parentDiv {
  width: 100%;
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(248, 247, 244);
}
h2 {
  display: block;
  float: left;
}
</style>